<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css"/>
    <title>首页</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/common.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>

    <style type="text/css">
        .black_overlay {
            display: none;
            /* 此元素不会被显示*/
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: #bbbbbb;
            z-index: 1001;
            /* z-index 属性设置元素的堆叠顺序。*/
            opacity: .80;
            /* opacity 属性设置元素的不透明级别。*/
        }

        .white_content {
            display: none;
            position: absolute;
            top: 20%;
            border: 1px solid #bbbbbb;
            border-radius: 20px;
            background-color: white;
            z-index: 9999;
            /*层级要比.black_overlay高，这样才能显示在它前面*/
            overflow: auto;
        }

        #light {
            position: absolute;
            left: 50%;
            /* top: 50%; */
            width: 400px;
            height: 450px;
            margin-left: -150px;
            /* margin-top: -125px */;
        }

        #form_submit {
            text-align: center;
            margin-left: 10px;
            margin-top: 10px;
        }

        #font_login {
            font-weight: 400;
            font-size: 24px;
            color: #BBBBBB;
            text-align: center;
            margin-top: 20px;
        }

        .button_beautiful {
            width: 60px;
            height: 34px;
            /* 高度 */
            border-width: 0px;
            border-radius: 6px;
            background: #4ECDC4;
            cursor: pointer;
            outline: none;
            color: white;
            font-size: 16px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<!-- 登录弹出层 -->
<div class="cvs" <c:if test="${empty loginPage}">style="display:none" </c:if> id="cvs2_logon">
    <div class="newModWin">
        <section class="clearfix">
            <div class="title"  >登录爱下载资源分享平台账号</div>
            <!-- 关闭弹出层 -->
            <div class="close" id="cvs2_close"></div>
        </section>

        <div class="logWin">
            <form action="${pageContext.request.contextPath}/user/login" method="post" id="form_lg">

                <input type="hidden" name="url" value="${param.url}">

                <input type="text" class="inp user" name="tel" autocomplete="off" placeholder="请输入手机号" />
                <input type="password" class="inp pass" name="password" autocomplete="off" placeholder="请输入密码" />
                <!-- 密码眼睛 -->
                <span class="eye clos"></span>
                <!-- <b> 显示登录失败错误信息 -->
                <b class="msg">${requestScope.msg}</b>
                <a href="${pageContext.request.contextPath}/password/find" class="find_pass">忘记密码，立即找回</a>
                <input type="submit" class="su_btn" value="登录" />
                <a href="${pageContext.request.contextPath}/user/register" class="regist">没有账号？立即注册</a>

                <div class="third">
                    <span class="lf"></span>第三方登录<span class="rf"></span>
                </div>

                <p class="third">
                    <a class="zfb"><span>支付宝</span></a>
                    <a class="wx"><span>微信</span></a>
                    <a class="qq"><span>QQ</span></a>
                </p>
            </form>
        </div>
    </div>
</div>
<script>
    // 给form 表单 绑定 onSubmit 事件
    $("#form_lg").on("submit",function (event){
        // 阻止表单默认提交行为
        event.preventDefault();
        // 获取录入的手机号
        let tel = $("input[name=tel]").val();
        if (tel == "") return false;

        // 判断手机号格式是否正确
        if (!/^1[3-9]\d{9}$/.test(tel)) return false;

        // 判断密码是否输入
        let pwd = $("input[name=password]").val();

        if (pwd == "") return false;

        // 提交表单
        this.submit();
    })

    $("#cvs2_close").on("click",function (event){
        $("#cvs2_logon").hide();
    })

</script>

<jsp:include page="common/header.jsp"/>

<article>

    <!-- 网站主体 -->
    <div id="main">
        <section class="aside">
            <!-- 定义右侧窗口信息 -->
            <jsp:include page="common/asideUser.jsp"/>
            <!-- vip充值窗口 2022/8/14新增 -->
            <div class="vip-cvs"  @click="disable=!disable" >
                <div class="vip-cz-win">
                    <p class="title" >爱下载资源分享平台-开通VIP</p>
                    <div class="v1">
                        <h1>月会员</h1>
                        <p class="money">10</p>
                        <p class="ls">有效期30天</p>
                        <p class="ls">免费资源下载</p>
                        <p class="ls">赠送200积分</p>
                        <a class="btn" href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';
                        document.getElementById('fade').style.display='block'">立即开通</a>
                    </div>
                    <div class="v2">
                        <h1>年会员</h1>
                        <p class="money">80</p>
                        <p class="ls">有效期365天</p>
                        <p class="ls">免费资源下载</p>
                        <p class="ls">赠送2000积分</p>
                        <a class="btn" href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';
                        document.getElementById('fade').style.display='block'">立即开通</a>
                    </div>
                    <div class="v3">
                        <h1>永久会员</h1>
                        <p class="money">300</p>
                        <p class="ls">永久有效</p>
                        <p class="ls">免费资源下载</p>
                        <p class="ls">赠送10000积分</p>
                        <a class="btn" href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';
                        document.getElementById('fade').style.display='block'">立即开通</a>
                    </div>
                </div>
            </div>
        </section>
        <div id="light" class="white_content">
            <div id="font_login">微信支付(将在24小时内积分到帐)</div>
            <!-- 登陆部分代码 -->
            <form action="" method="post" id="form_submit">
                <img src="${pageContext.request.contextPath}/images/weixinpay.jpg" alt="微信收款二维码">
                <p><input type="button" value="取消" class="button_beautiful" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" />
                </p>
            </form>
        </div>
        <div id="fade" class="black_overlay"></div>

        <!-- 定义左侧窗口信息 -->
        <section>
            <!-- 定义资源类型导航 -->
            <ul class="res-nav clearfix">
                <li class="active" @click="showHot(null)"><a href="#" >全部</a></li>
                <li v-for="t in types" :value="t.id" @mouseenter="showSecondNav">
                    <a href="#" >{{t.typeName}}</a>
                    <ul >
                        <a  href="#">
                        <li  v-for="c in typesChildren" :value="c.id" @click="showHot(c.id)">{{c.typeName}}</li>
                        </a>
                    </ul>
                </li>


            </ul>

            <!-- 定义每一个资源 -->
            <dl class="items" v-for="t in reses" >
                <dd>
                    <%--跳转资源详情页面 --%>
                    <a :href="'${pageContext.request.contextPath}/resource/detail?resId='+t.id" >
                        <div class="size">文件大小:<em>{{getFileSize(t.size)}}</em></div>
                        <div class="filename">{{t.resource_name}}</div>
                        <div class="score">积分:<em>{{t.score}}</em><br/>浏览:<em>330</em></div>
                        <img class="thumbimg" :src="'${pageContext.request.contextPath}/images/'+t.ext+'.svg'" />
                        <img class="thumbimg" v-show="t.hot==0 ? true:false" style="margin-top: -150px" src="${pageContext.request.contextPath}/images/hot.png"/>
                    </a>
                </dd>
                <dt >
                    <%--跳转资源详情页面 --%>
                    <a :href="'${pageContext.request.contextPath}/resource/detail?resId='+t.id" >
                        <li>
                        {{t.resource_name}}
                        </li>
                    </a>
                </dt>
            </dl>
            <!-- 清除浮动 -->
            <div class="clearfix"></div>
        </section>
        <!-- 分页 -->
        <jsp:include page="common/pagination.jsp"/>
    </div>
</article>

<jsp:include page="common/footer.jsp"/>

</body>

<script>
    new Vue({
        el:"#main",
        data:{
            page: 1 ,
            total : 0 ,
            types:[],
            typesChildren:[],
            pid:"",
            reses:[],
            resid:null,//资源id
            ev:"",
            Furl:"",
            disable:false,
        },
        created(){
            this.getQueryString();
            this.showNavigation();//调用导航栏方法
            if (this.Furl==""){
                this.showHot();//展示页面数据->热门资源
            }else {
                this.Fshow();
            }

        },
        watch: {
            page: function(newPage, oldPage) {
                // 获取 新页码 对应的数据
                fetch("${pageContext.request.contextPath}/res/reshot?hot="+this.hot+"&id="+this.ev+"&page=" + newPage).then(ret => {
                    if (ret.status) {
                        this.reses = ret.data.list ;
                        this.total = ret.data.total ;
                    }
                })
            }
        },
        methods:{
            getFileSize(size){
                if (size > (1<<30)){
                    return (size / (1<<30)).toFixed(2) + "GB";
                }
                if (size > (1<<20)){
                    return (size / (1<<20)).toFixed(2) + "MB";
                }
                if (size > (1<<10)){
                    return (size / (1<<10)).toFixed(2) + "KB";
                }
                return size + "B";
            },
            //获取页面传参
            getQueryString(){
                this.Furl = decodeURI(window.location.search).substr(7)
                console.log(this.Furl)
            },
            //获取模糊查询的结果
            Fshow(){
                this.getQueryString();
                fetch("${pageContext.request.contextPath}/res/queryF?name="+this.Furl).then(ret=>{
                    if (ret.status){
                        this.reses=ret.data.list;
                        this.total = ret.data.total ;
                    }

                })
            },
            //展示一级导航栏
            showNavigation(){
                fetch("${pageContext.request.contextPath}/res/types").then(ret=>{
                    /*console.log(ret.data);
                    console.log(ret.data[0].children)*/
                    this.types = ret.data;
                    this.typesChildren = ret.data[0].children
                })
            },
            //展示二级导航栏
            showSecondNav(event){
                let parentId = event.target.value;
                let secondType = this.types.find(p=>p.id==parentId);
                this.typesChildren=secondType.children;
            },
            //展示资源
            /*showResource(){
                fetch("${pageContext.request.contextPath}/res/reses?id="+this.pid).then(ret=>{
                    if (ret.status)
                    this.reses = ret.data;
                })
            },*/
            showRes(event){
                this.pid=event.target.value;
                this.showResource();
            },
            //热门资源展示
            showHot(event){
                if(event==undefined){
                    this.ev = "";
                }else {
                    this.ev = event;
                }
                //hot为预留参数 可不传   id导航栏id
                fetch("${pageContext.request.contextPath}/res/reshot?hot="+this.hot+"&id="+this.ev+"&page="+this.page).then(ret=>{
                    if (ret.status){
                        this.reses=ret.data.list;
                        this.total = ret.data.total ;
                    }
                })
            }
        }

    });
</script>

</html>
